<template>
  <div class="danmaku-item">
    <div v-if="item.type" class="danmaku-author-face"
         :style="`background-image: url(${item.headImage})`"></div>
    <div class="danmaku-content" v-if="item.type=='chatMsg'">
      <span class="danmaku-author-name with-colon">{{ item.nikeName }}</span>
      <span class="danmaku-message">{{ item.content }}</span>
    </div>

    <div class="danmaku-content" v-if="item.type=='gift'">
      <span class="danmaku-message">感谢&nbsp;</span>
      <span class="danmaku-author-name">{{ item.nikeName }}</span>
      <span class="danmaku-message">&nbsp;投喂&nbsp;</span><span class="danmaku-gift-name">{{ item.giftName }}</span>
      <span class="danmaku-message">&nbsp;×&nbsp;</span><span class="danmaku-gift-num">{{ item.count }}</span>
    </div>


    <div class="danmaku-content" v-if="item.type=='vipJoin'">
      <span class="danmaku-message">欢迎舰长&nbsp;</span>
      <span class="danmaku-author-name">{{ item.nikeName }}</span>
      <span class="danmaku-message">&nbsp;进入直播间&nbsp;</span>
    </div>

    <div class="danmaku-content" v-if="item.type=='join'">
      <span class="danmaku-message">欢迎&nbsp;</span>
      <span class="danmaku-author-name">{{ item.nikeName }}</span>
      <span class="danmaku-message">&nbsp;进入直播间&nbsp;</span>
    </div>

  </div>

  <!--  <div class="danmaku-item" v-else-if="item.type=='gift'">-->
  <!--    <div class="danmaku-author-face"-->
  <!--         style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
  <!--    <div class="danmaku-content"><span class="danmaku-message">感谢&nbsp;</span><span-->
  <!--        class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
  <!--        class="danmaku-message">&nbsp;赠送&nbsp;</span><span class="danmaku-gift-name">小心心</span><span-->
  <!--        class="danmaku-message">&nbsp;×&nbsp;</span><span class="danmaku-gift-num">1</span></div>-->
  <!--  </div>-->

  <!--  <div class="danmaku-item" v-else-if="item.type=='join'">-->
  <!--    <div class="danmaku-author-face"-->
  <!--         style="background-image: url(http://127.0.0.1:9501/static/d341584a5a835ef9e910cd63724b4d4246599ee9.jpg);"></div>-->
  <!--    <div class="danmaku-content"><span class="danmaku-message">欢迎&nbsp;</span><span-->
  <!--        class="danmaku-author-name">吃菠夢包的白咲花</span><span-->
  <!--        class="danmaku-message">&nbsp;进入直播间&nbsp;</span></div>-->
  <!--  </div>-->
</template>

<script>
export default {
  name: "Danmaku",
  props: {
    item: {
      type: Object
    }
  }
}
</script>

<style scoped lang="less">

@keyframes danmakuIn {
  from {
    transform: translateX(30px);
    opacity: 0;
  }
  to {
    transform: translateX(0);
    opacity: 1;
  }
}

.danmaku {
  &-item {
    padding: 4px;
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    transition: opacity 0.5s;
    user-select: none;
    text-shadow: -2px -2px #000000, -2px -1px #000000, -2px 0 #000000, -2px 1px #000000, -2px 2px #000000,
      -1px -2px #000000, -1px -1px #000000, -1px 0 #000000, -1px 1px #000000, -1px 2px #000000, 0 -2px #000000,
      0 -1px #000000, 0 0 #000000, 0 1px #000000, 0 2px #000000, 1px -2px #000000, 1px -1px #000000, 1px 0 #000000,
    1px 1px #000000, 1px 2px #000000, 2px -2px #000000, 2px -1px #000000, 2px 0 #000000, 2px 1px #000000,
    2px 2px #000000;
    animation: 0.5s danmakuIn;
    opacity: 1;

    &.hidden {
      opacity: 0;
    }
  }

  &-author-face {
    width: 24px;
    height: 24px;
    border-radius: 24px;
    margin-right: 6px;
    display: inline-block;
    flex-shrink: 0;
    background-size: cover;
  }

  &-content {
    overflow: initial;
    align-self: center;
  }

  &-author-name {
    color: #8cd9ff;

    &.with-colon::after {
      content: '：';
      margin-left: 2px;
    }

    // 主播
    &.anchor {
      color: #fff248;
    }

    // 房管
    &.owner {
      color: #ff9800;
    }
  }

  &-message,
  &-gift-num {
    color: #fff;
  }

  &-gift-name {
    color: #eb76ff;
  }

  &-message {
    font-family: 'Imprima', 'Microsoft YaHei';
    font-size: 14px;
    line-height: 14px;
  }

  &-gift-num {
    font-family: 'Imprima', 'Microsoft YaHei';
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
  }

  &-author-name,
  &-gift-name {
    font-family: 'Changa One', 'Microsoft YaHei';
    font-size: 16px;
    line-height: 16px;
    font-weight: 500;
  }
}
</style>
